<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="${ctx}/res/js/thirdParty/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${ctx}/res/js/menuManagement/menuManagementList.js"></script>
	<script type="text/javascript" src="${ctx}/res/js/thirdParty/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
	<style type="text/css">
		.divToolbar {
			line-height: 30px;
			text-align: left;
			width: 250px;
			margin-top: 30px; 
			margin-bottom: 5px;
		}
		
		 .menuContent {
			border:1px solid black;
			display:none;
			background-color:white;
			height:300px;
			position:absolute;
			z-index:9999;
			overflow:auto;
		} 
		
		.treeScroll {
			width: 250px;
			height:400px;
			overflow: auto;
		}
		
		.divButton {
			margin: 0 2px 0 2px;
			padding: 1px 1px 1px 1px;
			min-width: 65px;
		}
		.td_for_textarea{
		 width: 300px;
		}
		
	</style>

</head>
<body  >

<input type="hidden" id="parentId" name="parentId" />
	<table>
		<tr>
			<!--左侧的tree  -->
			<td style="vertical-align: top;">				 
					<div class="list_toolbar divToolbar">
						<div class="toolButton divButton" id="showAddDiv">新建</div>
						<div class="toolButton divButton" id="showUpdateDiv">修改</div>
						<div class="toolButton divButton" id="deleteMenu">删除</div>
					</div>
					
					<div class="zTreeDemoBackground left treeScroll">
						<ul id="menuTree" class="ztree"></ul>
					</div>
			</td>
			
			<!--右侧显示画面  -->
		    <td style="vertical-align: center;">
			    <form id="menuForm" class="form_bkgd">		 
					<center>
					 <div   style="height:65px;"></div>  
					<!--普通显示模式，只显示  -->
					<div id="displaymode" class="form_data" style ="min-height: 400px;">
					<table> 
						<tr>
							<td class="td_for_label">MENU.MENUNAME</td> 
							<td class="td_for_input" > 
								<input type="text" id="menuname1"  name="menuname1"  disabled>  
							</td>
							
						    <td class="td_for_label">MENU.MENUTYPE</td>
							<td class="td_for_input">  
								<input type="text" id="menutype1"  name="menutype1"  disabled>
							</td>
						</tr> 
						<tr>
							<td class="td_for_label">MENU.MENUDESC</td>
							<td class="td_for_input"> 
								<input type="text" id="menudesc1"  name="menudesc1"  disabled>
							</td>
							
							<td class="td_for_label" >MENU.PARENTNAME</td>
							<td class="td_for_input">
								<input type="text" id="parentName1" name="parentName1"   disabled />
							</td>
						</tr> 
						<tr>
							<td class="td_for_label">MENU.CONTENT</td>
							<td >
								<textarea type="text" id="menucont1" name="menucont1" class="td_for_textarea" disabled ></textarea>
							</td>
								
							<td class="td_for_label" >MENU.ROLE</td>
							<td rowspan="3" > 
								<div>
									<div >
										<select multiple id="select" style="width: 108px; height: 130px;background-color:#F9F9F9;overflow:hidden;" disabled>
										</select>
									</div> 
								</div>
							</td>
						</tr>
						 
						<tr>
							<td class="td_for_label">MENU.MENUORDER</td>
							<td class="td_for_input"><input type="text" id="menuorder1" name="menuorder1"  disabled >
							</td>
						</tr> 
						<tr>
							<td class="td_for_label">MENU.OPENTYPE</td>
							<td class="td_for_input"><input type="text" id="opentype1" name="opentype1"  disabled  >
							</td>
						</tr> 
					</table>
					</div>
					
					<!--编辑模式  -->
					<div id="editmode" class="form_data" style ="min-height: 400px;" hidden>
					<table> 
						<tr>
							<td class="td_for_label">MENU.MENUNAME<span style="color:red">&nbsp;*</span></td> 
							<td class="td_for_input" > 
								<input type="text" id="menuname"  name="menuname" >  
							</td>
							
						    <td class="td_for_label">MENU.MENUTYPE<span style="color:red">&nbsp;*</span> </td>
							<td > 
								<select id="menutype" name="menutype" 
									style="width: 316px; height: 32px;line-height:32px;font-size:14px;padding: 4px 6px;" > 
								</select>
							</td>
						</tr>
						 
						<tr>
							<td class="td_for_label">MENU.MENUDESC &nbsp;</td>
							<td class="td_for_input">
								<input type="text" id="menudesc" name="menudesc" >
							</td>
							
							<td class="td_for_label" >MENU.PARENTNAME<span style="color:red">&nbsp;&nbsp;&nbsp;*</span></td>
							<td class="td_for_input"> 
								   		<input id="parentName" name="parentName" type="text" readonly value="----请选择父项菜单----"  onclick="showMenu(); return false;"/>
							  
								<!-- 显示树 -->
								<div id="menuContent" class="menuContent" style = "width: 311px;" >
									<ul id="menuTree1" class="ztree" style="margin-top:0;"></ul>
								</div>
							</td>
						</tr>
						 
						<tr>
							<td class="td_for_label">MENU.CONTENT &nbsp;</td>
							<td >
								<textarea type="text" id="menucont" class="td_for_textarea" name="menucont"></textarea>
							</td>
								
							<td class="td_for_label" >MENU.ROLE<span style="color:red">&nbsp;&nbsp;*</span></td>
							<td rowspan="3" > 
								<div>
									<div style="float:left;">
								      <select multiple id="select1" style="width: 108px; height: 130px;">
								      </select>
									</div>
									<div style="float:left;">
										<div style="margin:0 5px" id="add" class="toolButton" >选中添加</div><br>
										<div style="margin:5px" id="add_all" class="toolButton">全部添加</div><br>
										<div style="margin:0 5px" id="remove" class="toolButton">选中移除</div><br>
										<div style="margin:5px" id="remove_all" class="toolButton">全部移除</div>
									</div>
									<div style="float:left;">
										<select multiple id="select2"  name="select2" style="width: 108px; height: 130px;">
										</select>
									</div>
								</div>
							</td>
						</tr>
						 
						<tr>
							<td class="td_for_label">MENU.MENUORDER<span style="color:red">&nbsp;*</span> </td>
							<td class="td_for_input"><input type="text" id="menuorder" name="menuorder">
							</td>
						</tr>
						 
						<tr>
							<td class="td_for_label">MENU.OPENTYPE<span style="color:red">&nbsp;*</span> </td>
							<td class="td_for_input">
							<select id="opentype" name="opentype" 
							 style="width: 316px; height: 32px;line-height:32px;font-size:14px;padding: 4px 6px;" > 
								</select>
							</td>
						</tr>
						
						<!-- 按键显示 -->
						<tr>
							<td style="text-align:center;padding:10px;" colspan="4">
								<div id="btnSubmit" class="toolButton">提交</div>
								<div id="btnCancel" class="toolButton">取消</div>
							</td>
						</tr>
					</table>					
					</div> 
					</center>
				</form>
			</td>
		</tr>
	</table>
</body>
</html>